<template>
    <div style="position: relative">
        <Spin fix v-if="loading"></Spin>
        <div class="flex flex-space-between flex-align-center margin-bottom-20 border-bottom" style="padding-bottom:20px">
            <div class="flex flex-align-end">
                <h3>
                    工单编号：{{ticketInfo.ticket_sn}}
                    <span v-if="ticket">（{{ticket.state | ticketState(ticket.service_type)}}）</span>
                </h3>
                <span v-if="ticketInfo">{{ticketInfo.tags | ticketTags}}</span>
            </div>
            <div v-if="ticket">
                <i-button @click="cancelVisible = true" v-if="getIfBtnShouldExist(ticket, '取消')">取消工单</i-button>
            </div>
        </div>

        <div>
            <h3 class="margin-bottom-20">基础信息</h3>
            <Row :gutter="20" class="margin-bottom-20" v-if="ticket">
                <i-col span="6">
                    下单人：{{ticket.subscribe.name}} {{ticket.subscribe.phone}}
                </i-col>
                <i-col span="6">
                    现场联系人：<span v-if="ticket.contact_person">{{ticket.contact_person.name}} {{ticket.contact_person.phone}}</span>
                </i-col>
                <i-col span="6">
                    <span v-if="ticket.service_type === 1">新装设备：</span>
                    <span v-if="ticket.service_type === 2">维修设备：</span>
                    <span v-if="ticket.service_type === 3">拆卸设备：</span>
                    <span v-if="ticket.service_type === 4">重装设备：</span>
                    {{ticket | ticketDeviceModel}}
                </i-col>
            </Row>
            <Row :gutter="20" class="margin-bottom-20" v-if="ticket">
                <i-col span="6">
                    创建时间：{{ticket.created_at | date('YYYY-MM-DD HH:mm')}}
                </i-col>
                <i-col span="6" v-if="ticket.subscribe.expected_time && ticket.service_type === 1">
                    期望上门时间：
                    {{ticket.subscribe.expected_time | date('YYYY-MM-DD')}}
                    ({{ticket.subscribe.expected_period | appointmentPeriod}})
                </i-col>
                <i-col span="6" v-if="ticket.respond_hour">
                    工单紧急度：{{ticket.respond_hour}}小时
                </i-col>
                <i-col span="6">
                    预约上门时间：
                    <span  v-if="ticket.appointment_time && ticket.service_type === 1">
                        {{ticket.appointment_time | date('YYYY-MM-DD')}}
                        {{ticket.appointment_period | appointmentPeriod}}
                    </span>
                    <span  v-if="ticket.appointment_time && ticket.service_type !== 1">
                        {{ticket.appointment_time | date('YYYY-MM-DD HH:mm')}}
                    </span>
                </i-col>
            </Row>
            <Row :gutter="20" class="margin-bottom-20" v-if="ticket">

                <i-col span="6">
                    安装师傅：
                    <span v-if="ticket.implementer">{{ticket.implementer.name}} - {{ticket.implementer.telephone}}</span>
                    <span v-else>暂未分配</span>
                </i-col>
                <i-col span="6">
                    提交时间：{{ticket.submit_time | date('YYYY-MM-DD HH:mm')}}
                </i-col>
            </Row>
            <Row :gutter="20" class="margin-bottom-20" v-if="ticket">
                <i-col span="6">
                    备注：{{ticket.subscribe.note}}
                </i-col>
            </Row>
        </div>

        <Menu :active-name="currentTab" @on-select="handleTabChange" mode="horizontal">
            <MenuItem :key="item.name" :name="item.name" v-for="item in components">{{item.label}}</MenuItem>
        </Menu>

        <div style="padding-bottom: 50px" v-if="ticket">
            <div :key="item.name" v-for="item in components">
                <component :is="item.component" :ticket="ticket" v-if="item.loaded" v-show="item.name === currentTab"></component>
            </div>
        </div>

        <select-engineer :show.sync="selectEngineerVisible" :tickets="tickets" @refresh="fetchDetail"></select-engineer>

        <cancel-modal :show.sync="cancelVisible" :ticket="ticket" @refresh="fetchDetail"></cancel-modal>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
import baseDetail from './base-detail'
import operateLog from './operate-log'
import selectEngineer from '../list-components/modal/selectEngineer'
import cancelModal from '../list-components/modal/cancelModal'
import { TicketOperateBtns } from '@/libs/const'

export default {
  name: 'ticket-detail',
  props: {
    ticketInfo: [Object]
  },
  components: {
    baseDetail,
    operateLog,
    selectEngineer,
    cancelModal
  },
  data () {
    return {
      loading: false,
      ticket: null,
      tickets: [],
      currentTab: 'baseDetail',
      components: [
        { name: 'baseDetail', label: '设备相关信息', loaded: true, component: 'baseDetail' },
        { name: 'operateLog', label: '操作日志', loaded: false, component: 'operateLog' }
      ],
      selectEngineerVisible: false,
      cancelVisible: false
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    async fetchDetail () {
      try {
        this.loading = true
        const detail = await http.fetch(this, api.ticket_info, [this.ticketInfo.id], {
          service_type: this.ticketInfo.service_type
        })
        if (detail) {
          this.ticket = detail
          this.tickets = [detail]
        }
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    },
    handleTabChange (name) {
      this.currentTab = name
      const index = this.components.findIndex(item => item.name === name)
      if (!this.components[index].loaded) this.$set(this.components[index], 'loaded', true)
    },
    handleEdit () {
      this.$store.dispatch('addTicketTab', {
        type: 'edit',
        ticket: this.ticketInfo
      })
      this.$router.push({
        path: `/ticket/edit/${this.ticketInfo.id}`
      })
    },

    getIfBtnShouldExist (ticket, btnName) {
      const btnArray = TicketOperateBtns[this.ticket.service_type][ticket.state] || []
      return btnArray.includes(btnName)
    }
  }
}
</script>

<style lang="less" scope>
.ivu-menu-light {
    background-color: snow;
}
</style>
